﻿@model IQueryable<SusuCMS.PageType>
@{
    ViewBag.Title = "PageType Index".Localize();
}
<h2>
    @("PageType List".Localize())
</h2>
<div class="toolbar">
    @Html.ActionLink("Create", "Create", "PageType", new { returnUrl = Request.RawUrl }, new { @class = "button" })
</div>
@using (Html.BeginForm("Delete", "PageType"))
{
    <table class="data-table" id="tree-table">
        <thead>
            <tr>
                <th>
                    @("Name".Localize())
                </th>
                <th>
                    @("TemplatePath".Localize())
                </th>
                <th>
                    @("Create Time".Localize())
                </th>
                <th>
                    @("IsPublished".Localize())
                </th>
                <th>
                    @("Edit".Localize())
                </th>
                <th>
                    @("Delete".Localize())
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr id="node-@item.Id" @if (item.ParentId.HasValue)
                                       {<text>class="child-of-node-@item.ParentId"</text>}>
                    <td>
                        <a>@item.Name</a>
                    </td>
                    <td>
                        @item.TemplatePath
                    </td>
                    <td>
                        @item.CreateTime
                    </td>
                    <td>
                        @Html.ActionLink("IsPublished", "ToggleOnline", "PageType", new { id = item.Id, returnUrl = Request.RawUrl }, new { @class = item.IsPublished.ToString().ToLower() })
                    </td>
                    <td>
                        @Html.ActionLink("Edit", "Edit", "PageType", new { id = item.Id }, new { @class = "edit" })
                    </td>
                    <td>
                        <button type="submit" value="@item.Id" name="Id" class="delete">@("Delete".Localize())</button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}
<script type="text/javascript">
    $(document).ready(function () {
        $("#tree-table").treeTable({
            initialState: "expanded"
        });

        // Drag & Drop Code
        $("#tree-table tr td:first-child, #tree-table tr td:first-child").draggable({
            helper: "clone",
            cursor: 'default',
            opacity: .75,
            refreshPositions: true,
            revert: "invalid",
            revertDuration: 300,
            scroll: true,
            delay: 100
        });

        $("#tree-table tr td:first-child, #tree-table  tr td:first-child").each(function () {
            $($(this).parents("tr")[0]).droppable({
                accept: "*",
                drop: function (e, ui) {
                    $($(ui.draggable).parents("tr:eq(0)")).appendBranchTo(this);

                    if ($(ui.draggable).parents('tr:eq(0)').attr('id') != $(this).attr('id')) {
                        var id = $(ui.draggable).parents('tr:eq(0)').attr('id').substring(5);
                        var parentId = $(this).attr('id').substring(5);

                        $('input[type=hidden][name=id]').val(id);
                        $('input[type=hidden][name=parentId]').val(parentId);

                        $('#PageTypeMoveForm').submit();
                    }
                },
                hoverClass: "accept",
                over: function (e, ui) {
                    if (this.id != ui.draggable.parents('tr.parent:eq(0)').attr('id') && !$(this).is(".expanded")) {
                        $(this).expand();
                    }
                }
            });
        });
    });
</script>
